<template>
  <div class="footer-layout">
    <div class="footer-form wow bounceIn">
      <div class="form-itme">
        <p>怎么称呼</p>
        <input type="text" class="form-input" placeholder="请输入" v-model="addForm.name" />
      </div>
      <div class="form-itme">
        <p>联系电话</p>
        <input type="text" class="form-input" placeholder="请输入" v-model="addForm.phone" />
      </div>
      <div class="form-submit" @click="submitForm">立即提交</div>
    </div>
    <div class="footer-main">
      <div class="footer-swiper">
        <div class="swiper-container ft_swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in honner" :key="index">
              <img :src="item.img" alt="" />
              <p class="text1">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-contact">
        <h1>联系我们</h1>
        <p>地址：湖北省武汉市洪山区珞喻路889-1-融众国际18楼</p>
        <p>电话：177-4050-2025 / 133-7787-7786</p>
        <p>Q Q：259 259 2025</p>
        <p>邮箱：vr@2025.net</p>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
import { submitApi } from 'api/user.js'
export default {
  name: 'TabBar',
  props: {
    defaultActive: {
      type: Number,
      default: 0
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      honner: [
        {
          name: '高新技术企业证书',
          img: require('assets/image/cloud/honner1.jpg')
        },
        {
          name: 'ICP证书',
          img: require('assets/image/cloud/honner3.jpg')
        },
        {
          name: '软件产品证书',
          img: require('assets/image/cloud/honner5.jpg')
        },
        {
          name: '软件企业证书',
          img: require('assets/image/cloud/honner7.jpg')
        },
        {
          name: '信息安全管理体系认证证书',
          img: require('assets/image/cloud/honner8.jpg')
        },
        {
          name: '高新技术企业证书',
          img: require('assets/image/cloud/honner9.png')
        },
        {
          name: '信息技术服务管理体系认证证书',
          img: require('assets/image/cloud/honner10.png')
        }
      ],
      addForm: {
        name: '',
        phone: ''
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      var mySwiper = new Swiper('.ft_swiper', {
        slidesPerView: 4,
        spaceBetween: 5,
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        }
      })
    })
  },
  methods: {
    handleChange (value) {
      this.$emit('change', value)
    },
    submitForm () {
      if (this.addForm.name.length && this.addForm.phone.length) {
        submitApi(this.addForm).then(res => {
          if (res.code === 0) {
            this.$notify({ type: 'success', message: '您的信息已提交，我们会尽快与您取得联系!' })
          } else {
            this.$notify({ type: 'warning', message: res.message })
          }
        })
      } else {
        this.$notify({ type: 'warning', message: '请将信息填写完整!' })
      }
    }
  },
  components: {}
}
</script>
<style lang="scss" scoped>
.footer-layout {
  position: relative;
  background: #283345;
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  .footer-form {
    position: absolute;
    top: -190px;
    left: 33px;
    height: 380px;
    width: 684px;
    padding: 35px 40px;
    box-sizing: border-box;
    background: #025afa;
    border-radius: 10px;
    color: white;
    .form-submit {
      width: 100%;
      height: 70px;
      text-align: center;
      line-height: 70px;
      border-radius: 35px;
      background: rgba($color: #fff, $alpha: 0.6);
      font-size: 24px;
    }
    .form-itme {
      margin-bottom: 40px;

      font-size: 24px;
      p {
        margin-bottom: 10px;
      }
      .form-input {
        width: 100%;
        height: 44px;
        display: block;
        border: 0;
        border-bottom: 1px solid rgba($color: #fff, $alpha: 0.8);
        color: white;
        &::placeholder {
          color: rgba($color: #fff, $alpha: 0.6);
        }
      }
    }
  }
  .footer-main {
    height: 100%;
    padding: 245px 0 52px;
    box-sizing: border-box;
    .footer-swiper {
      height: 140px;
    }
    .footer-contact {
      margin-top: 55px;
      h1 {
        font-size: 30px;
        color: white;
        margin-bottom: 35px;
      }
      p {
        font-size: 24px;
        color: rgba($color: #fff, $alpha: 0.6);
        margin-bottom: 27px;
      }
    }
  }
}
.ft_swiper {
  width: 100%;

  .swiper-slide {
    img {
      height: 98px;
      display: block;
      margin: 0 auto 16px;
      margin-bottom: 16px;
    }

    p {
      font-size: 16px;
      font-weight: 400;
      color: rgba(151, 151, 151, 1);
      text-align: center;
    }
  }
}
</style>
